<!-- 广告 -->
<template>
  <div class="bg-white relative-box" style="padding: 0 20px 20px">
    <div class="import-btn-box">
      <el-select v-if="systemType == 'businessBuildingOperate'" class="margin-right-10" style="width: 160px" v-model="projectKey" size="mini" placeholder="请选择项目" @change="changeProject">
        <el-option v-for="item in projectOptions" :key="item.projectKey" :label="item.projectName" :value="item.projectKey" />
      </el-select>
      <el-upload :show-file-list="false" style="padding: 0 10px" class="upload-demo" action accept="" :http-request="event => beforeupload(event.file)">
        <el-button type="primary" size="mini">导入数据</el-button>
      </el-upload>
      <el-button type="primary" @click="out()" size="mini">导出数据</el-button>
    </div>
    <!-- <Select style="padding: 10px 0px" :parmData.sync="parmData" @change="selChange"></Select> -->
    <div class="padding-left-right-20">
      <explain ref="explain" :data-list="caseList" pageType="ad"></explain>
      <div class="fill-box flex">
        <BoxList class="flex-1 margin-right-20" v-if="adList.length > 0" :page-size="pageSize" :TableData.sync="adList" @click="boxClick"></BoxList>
        <el-empty class="flex-1" v-else description="暂无数据"></el-empty>
        <legend-tip :parm-data="parmData" @change="selChange"></legend-tip>
      </div>
    </div>
    <park-ad-dialog ref="ad" :model.sync="m_Detail.form" pageType="ad"></park-ad-dialog>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import parkAdDialog from '@c/roomStatus/parkAdDialog';
  import Explain from '@c/roomStatus/explain';
  import LegendTip from '@c/roomStatus/legendTip';
  import Select from '@c/roomStatus/select';
  import BoxList from '@c/roomStatus/boxList';
  import Api from '../../../api/roomStatus';
  import { projectList } from '@/api';

  export default {
    components: { Select, BoxList, parkAdDialog, Explain, LegendTip },
    data() {
      return {
        adList: [],
        systemType: localStorage.getItem('systemType'),
        projectKey: localStorage.getItem('projectKey'),
        projectOptions: [],
        searchParams: {
          projectKey: localStorage.getItem('projectKey'), //localStorage.getItem('projectKey'),
          parmDataKey: '',
        },
        pageSize: '',
        m_Detail: {
          form: {},
        },
        m_BackColor: {
          isVacancy: '#D6D6D4',
          isExpiring: '#F8D595',
          isArrearage: '#E27A78',
        },
        parmData: [
          { value: 'isVacancy', text: '空置', color: '#D6D6D4' },
          { value: 'isExpiring', text: '即将到期', color: '#F8D595' },
          { value: 'isArrearage', text: '欠费', color: '#E27A78' },
        ],
        caseList: [
          { name: '广告位数', icon: require('../../../assets/imgs/ad.png'), num: 0 },
          { name: '已租赁位数', icon: require('../../../assets/imgs/areaZu.png'), num: 0 },
          { name: '空置位数', icon: require('../../../assets/imgs/areaKong.png'), num: 0 },
          { name: '本财年收款', icon: require('../../../assets/imgs/income1.png'), num: 0 },
          { name: '本财年收入', icon: require('../../../assets/imgs/income2.png'), num: 0 },
          { name: '截止本财年收款', icon: require('../../../assets/imgs/income1.png'), num: 0 },
          { name: '截止本财年收入', icon: require('../../../assets/imgs/income2.png'), num: 0 },
        ],
      };
    },

    mounted() {
      this.initConfig();
      //businessBuildingOperate 商写运营要独立选择项目 初始为第一个项目
      if (this.systemType == 'businessBuildingOperate') {
        this.getProjectList();
      } else {
        this.GetData();
      }
    },
    //方法集合
    methods: {
      async GetData() {
        let res = await Api.listAd(this.searchParams);
        res.toAdItemDtos.forEach(item => {
          item.color = this.m_BackColor[item.type];
        });
        this.adList = res.toAdItemDtos || [];
        this.setCaseNum(res);
      },
      setCaseNum(res) {
        this.caseList[0].num = res.adNums || 0;
        this.caseList[1].num = res.rentAdNums || 0;
        this.caseList[2].num = res.restAdNums || 0;
        this.caseList[3].num = res.incomeAmount || 0;
        this.caseList[4].num = res.forcastAmount || 0;
        this.caseList[5].num = res.incomeTotalAmount || 0;
        this.caseList[6].num = res.forcastTotalAmount || 0;
      },
      selChange(res) {
        this.searchParams = {
          projectKey: localStorage.getItem('projectKey'), //localStorage.getItem('projectKey'),
          parmDataKey: '',
        };
        this.searchParams.parmDataKey = res.value;
        this.searchParams[res.value] = 1;
        this.GetData();
      },
      boxClick(item) {
        console.log(item);
        this.m_Detail.form = item;
        this.$refs.ad.dialogShow = true;
      },
      beforeupload(file) {
        Api.importAdInfo(file).then(res => {
          this.$message.success('上传成功');
          this.GetData();
        });
      },
      out() {
        Api.outAdInfo({ ...this.searchParams }).then(res => {});
      },
      initConfig() {
        let windowWidth = document.body.offsetWidth;
        if (windowWidth <= 1440) {
          this.pageSize = 's';
        } else if (1440 < windowWidth && windowWidth <= 1920) {
          this.pageSize = 'm';
        }
      },

      //项目列表
      async getProjectList() {
        let res = await projectList({});
        this.projectOptions = res.rows;
        this.projectKey = res.rows.length > 0 ? res.rows[0].projectKey : '';
        this.searchParams.projectKey = res.rows.length > 0 ? res.rows[0].projectKey : '';
        if (!this.projectKey) return
        this.GetData();
      },

      async changeProject() {
        this.m_Form.projectKey = this.projectKey
        this.GetData();
      },
    },
  };
</script>
<style scoped lang="scss">
  .import-btn-box {
    position: absolute;
    right: 10px;
    top: -47px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep .el-dialog .el-dialog__header {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
  }
  ::v-deep .el-dialog .el-dialog__header .el-dialog__close {
    color: #333;
  }
</style>
